<template>
  <div class="full-page">
    <van-nav-bar title="发布作品" left-arrow @click-left="onClickLeft" fixed />

    <div class="con">
      <div class="con_wrap">
        <van-uploader v-model="fileList" :deletable="false" multiple>
          <template #preview-cover="{ index }">
            <div class="preview-cover van-ellipsis" @click.stop="del(index)">
              删除
            </div>
          </template>
        </van-uploader>

        <div class="input_wrap">
          <input
            type="text"
            class="input"
            placeholder="添加描述"
            v-model="title"
          />
        </div>
        <div class="classification" @click="fenlei = true">
          <h1>推荐类型</h1>
          <p>&gt;</p>
        </div>
        <van-button color="#6670e4" block @click="submit">发布菜谱</van-button>
      </div>
    </div>

    <transition name="van-slide-right">
      <Classification v-if="fenlei" @backs="act"></Classification>
    </transition>
  </div>
</template>
  
  <script>
import { NavBar, Button, Dialog, Uploader, Toast } from "vant";
import { upDataImg, publishWorks } from "@/api/publish";
import Classification from "./Classification";

export default {
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    [Uploader.name]: Uploader,
    Classification,
  },
  data() {
    return {
      fenlei: false,
      title: "",
      fileList: [],
      fenleiAct: "",
    };
  },
  methods: {
    act(index) {
      this.fenleiAct = index;
      this.fenlei = false;
    },
    del(index) {
      this.fileList.splice(index, 1);
    },
    // 返回
    onClickLeft() {
      Dialog.confirm({
        title: "确定退出吗",
        message: " 退出将无法保存填写的内容",
      })
        .then(() => {
          history.back();
        })
        .catch(() => {});
    },
    submit() {
      Dialog.confirm({
        title: "确定发布吗",
        message: "芜湖",
      })
        .then(async () => {
          if (this.fileList.length == 0) {
            Toast("请选择作品");
            return;
          }
          if (this.title == "") {
            Toast("请添加描述");
            return;
          }
          if (this.fenleiAct == "") {
            Toast("请选择分类");
            return;
          }
          let formData = new FormData();
          this.fileList.forEach((item) => {
            formData.append("img", item.file);
          });
          const res = await upDataImg(formData);
          let pushTime = new Date().getTime();
          let datas = {
            img: res.data,
            title: this.title,
            classList: this.fenleiAct,
            pushTime,
          };
          let { data, error } = await publishWorks(datas);
          if (error) {
            Toast.fail(data.message);
            return;
          }
          Toast.success(data.message);
          history.back();
        })
        .catch(() => {});
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.full-page {
  position: absolute;
  background: #fff;
  z-index: 2;
  overflow: hidden;
  .con {
    height: calc(100% - 49px);
    position: absolute;
    top: 49px;
    left: 0;
    overflow-y: auto;
    width: 100%;

    &::-webkit-scrollbar {
      display: none;
    }
    .con_wrap {
      margin: 0 5vw;
      padding-bottom: 26.6667vw;
      .preview-cover {
        position: absolute;
        bottom: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 4px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
      }
      .input_wrap {
        padding: 25px 0;
        width: 100%;
        display: flex;
        position: relative;
        &:before {
          content: "";
          pointer-events: none; /* 防止点击触发 */
          box-sizing: border-box;
          position: absolute;
          width: 200%;
          height: 200%;
          left: 0;
          bottom: 0;
          border-bottom: 1px solid #f2f1f1;
          transform: scale(0.5);
          transform-origin: 0 100%;
        }
        .input {
          width: 50%;
          outline: none;
          border: 0;
          font-size: 18px;

          &::placeholder {
            color: #bcbcbc;
          }
        }
      }
      .classification {
        color: #000;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2.6667vw 0;
        margin: 5.3333vw 0;
        h1 {
          font-weight: 800;
        }
      }
      .icon {
        color: #999999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .icon-wenanfengmian {
          font-style: normal;
          font-size: 13.3333vw;
        }
      }
    }
  }
}
</style>
  